<template>
  <!-- 常见问题 -->
  <div class="quota-container">
    <div class="filter-container">
      <k-button class="top-btn" value="新增档位" @click.native="addItemDialog" />
      <k-button class="top-btn" value="删除" @click.native="delItemData" />
    </div>
    <!--表格相关 -->
    <el-table
      ref="dragTable"
      :data="listData"
      fit
      border
      row-key="id"
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column prop="offplace" min-width="150px" label="档位/元" sortable align="center" show-overflow-tooltip />
      <el-table-column prop="limitNum" min-width="150px" label="次数限制" sortable align="center" show-overflow-tooltip />
      <el-table-column prop="prompt" min-width="150px" label="提示" align="center" show-overflow-tooltip />
      <el-table-column min-width="200px" label="配置时间" sortable align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="createByname" min-width="150px" label="配置人" align="center" show-overflow-tooltip />
      <el-table-column min-width="100px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="2"
            @change="handelUpdate(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/查看" @click.native="itemUpdateDialog(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 弹窗 -->
    <k-dialog
      :show-hide.sync="addBox.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class="addBox-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveItemDataClick"
    >
      <el-form :model="addItemInfo" label-width="auto" class="form-modify">
        <el-form-item>
          <span slot="label">
            <el-tooltip content="档位数的数据：其他配置->支付配置 所有开启的支付 下的消费档位（已去重）" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            档位数：
          </span>
          <el-select v-model="addItemInfo.offplace" placeholder="默认为不限制">
            <el-option v-for="item in optionlist" :key="item.id" :label="item.name+'元'" :value="item.name" />
          </el-select>
          <k-button v-if="authorityHandle(161)||authorityHandle(162)" class="top-btn" value="去查看" @click.native="$router.push({ path: '/rootothersetting/pay-setting' })" />
        </el-form-item>
        <el-form-item label="次数限制：">
          <el-input v-model="addItemInfo.limitNum" show-word-limit onkeyup="value=value.replace(/[^0-9]/g,'')" placeholder="不输入，默认为不限制">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="提示文案：">
          <el-input v-model="addItemInfo.prompt" :rows="5" show-word-limit type="textarea" placeholder="不输入，默认为不限制" />
        </el-form-item>
      </el-form>
    </k-dialog>

  </div>
</template>

<script>
import { userOffplaceSelectUserOffplaceList, selectOffplaceDetail, userOffplaceInsertUserOffplace, updateUserOffplace, deleteUserOffplaceById } from '@/api/hq/index.js'

export default {
  data() {
    return {
      dialogStatus: 'create',
      textMap: {
        update: '修改/查看档位',
        create: '新增档位'
      },

      timeValue: '',
      timeCotinue: '',

      addItemInfo: {
        id: '',
        offplace: undefined, // 挡位,
        limitNum: undefined, // 次数限制,
        prompt: undefined // 提示文案
      },
      addBox: {
        showHide: false
      },

      listData: [],
      sortable: null,

      itemIds: [],
      optionlist: []
    }
  },
  created() {
    this.getList()
    this.GetOptionlistlity()
  },
  methods: {
    // 等级箱子列表页加载数据
    getList() {
      userOffplaceSelectUserOffplaceList({}).then(res => {
        this.listData = res.data.data
      })
    },
    addItemDialog() {
      this.addBox.showHide = true
      this.dialogStatus = 'create'
      this.$resetForm(this.addItemInfo)
      this.addItemInfo.type = 1
    },
    itemUpdateDialog(row) {
      this.dialogStatus = 'update'
      this.addBox.showHide = true
      this.addItemInfo = { ...row }
    },
    // 获取消费档位
    GetOptionlistlity(row) {
      selectOffplaceDetail().then((result) => {
        console.log('result: ', result)
        this.optionlist = result.data.data
      })
    },

    // 添加|修改
    saveItemDataClick() {
      if (!this.addItemInfo.offplace) return this.$message.error('档位数不能为空')
      if (this.dialogStatus == 'create') {
        userOffplaceInsertUserOffplace(this.addItemInfo).then(res => {
          if (!res.data.success) return this.$message.error(res.data.msg)
          this.getList()
          this.$resetForm(this.addItemInfo)
        })
      } else {
        updateUserOffplace(this.addItemInfo).then(res => {
          if (!res.data.success) return this.$message.error(res.data.msg)
          this.getList()
          this.$resetForm(this.addItemInfo)
        })
      }
      this.addBox.showHide = false
    },

    handelUpdate(row) {
      const flag = row.status // 保存点击之后v-modeld的值(true，false)
      row.status = row.status == 1 ? 2 : 1 // 保持switch点击前的状态
      this.$confirm(`是否 ${flag == 1 ? '开启' : '关闭'} 档位:${row.offplace}  的提醒?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = row
        if (flag == 1) {
          updateUserOffplace({ id, status: row.status == 1 ? 2 : 1 }).then(res => {
            if (!res.data.success) return this.$message.error(res.data.msg)
            this.getList()
            this.$resetForm(this.addItemInfo)
            this.$message.success(res.data.msg)
          })
        } else {
          updateUserOffplace({ id, status: row.status == 1 ? 2 : 1 }).then(res => {
            if (!res.data.success) return this.$message.error(res.data.msg)
            this.getList()
            this.$resetForm(this.addItemInfo)
            this.$message.success(res.data.msg)
          })
        }
      }).catch(() => {
        this.$message.info('取消操作！')
      })
    },
    delItemData() {
      if (this.itemIds.length == 0) {
        this.$message.error('最少选择一项')
        return
      }
      this.$confirm('确定删除选中项么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserOffplaceById({
          ids: this.itemIds
        }).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      const ids = val.map(item => item.id)
      this.itemIds = ids
    }
  }
}
</script>
  <style>
      .sortable-ghost {
          opacity: .8;
          color: #fff !important;
          background: #3b425d !important;
      }
  </style>
  <style lang="scss" scoped>
      $mainColor:#3b425d; // 主色调
      $disabledColor: #909399; //禁用色
      $hoverColor:#1D143C; // 鼠标停留主色调浅色

      ::v-deep .el-select .el-input.is-focus .el-input__inner {
          border-color: $mainColor;
      }

      ::v-deep .el-input__inner:focus {
          border-color: $mainColor;
      }

      .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
      }

      .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
      }

      .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }

      .price-input {
          width: 70px;
      }

      .addBox-dialog {
          ::v-deep .el-dialog__body {
              padding: 10px 80px;
          }

          ::v-deep .image-slot {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
              background: #f5f7fa;
              color: #909399;
              font-size: 40px;
          }

          ::v-deep .el-textarea__inner:focus {
              outline: 0;
              border-color: $mainColor;
          }
      }

      .upload-btn {
          font-size: 14px;
          color: #ffffff;
      }

      .dialog-warningSetting {
          ::v-deep.el-input {
              width: 110px;
          }

          .price-input {
              width: 100px;
          }

          .el-icon {

              &-circle-plus,
              &-remove {
                  font-size: 22px;
                  color: #3b425d;
                  margin-left: 10px;

              }
          }

          ul {
              list-style-type: none;
              margin-top: 20px;
              padding: 0;

              li {
                  margin: 0 0 30px 0px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;

                  i {
                      color: #D1D5DD;
                  }
              }
          }

          .warning-title {
              font-size: 16px;
              color: #14162E;

              &-right {
                  font-size: 16px;
                  color: #14162E;
                  margin-left: 80px;
              }

              &-right2 {
                  font-size: 16px;
                  color: #14162E;
                  margin-left: 20px;
              }
          }
      }

      .table-btn {
          width: 90px;
          height: 35px;
          line-height: 35px;
          padding: 0;
          background: #e7ecf8;
          border: 1px solid $mainColor;
          border-radius: 8px;
          font-size: 14px;
          color: $mainColor;

          &:hover {
              background: $mainColor;
              color: #fff;
          }

          &:focus {
              background-color: #e7ecf8;
          }
      }

      .filter-container {
          width: 100%;
          height: 48px;
          line-height: 48px;
          margin-bottom: 30px;

          .filter-item {
              display: inline-block;
              vertical-align: middle;
              margin-bottom: 10px;
          }

          .top-btn {
              font-size: 14px;
              color: #ffffff;
          }

          .kInput {
              position: absolute;
              right: 20px;
          }
      }

      .chargeform {
          display: flex;
          flex-direction: row;
      }
  </style>

